 /*
 * @description: 掌大客服/客服设置/资料设置
 * @Author: along
 * @Date: 2020-09-27
 * @Last Modified by: along
 * @Last Modified time: 2020-09-27
 */
<template>
    <div class="customInfo-wrap">
        <div class="customInfo">
            <div class="title">客服账号</div>
            <div class="item">
                <p class="item_title">头  像:</p>
                <img
                    src="http://cdn.zsdx.cn/custom/custom-zd.png"
                    class="item_logo"
                >
            </div>
            <div class="item">
                <p class="item_title">账  号:</p>
                <p class="item_phone">{{ formData.username }}</p>
            </div>
            <div class="item">
                <p class="item_title">昵  称:</p>
                <p
                    class="item_phone"
                    v-if="!modify"
                >{{ name }}</p>
                <div
                    class="item_list"
                    v-if="modify"
                >
                    <p class="item_list_name">[掌大客服]-</p>
                    <el-input
                        v-model="formData.nickname"
                        size="small"
                        class="item_name_input"
                        :style="{width: '100%'}"
                    />
                </div>
                <p
                    v-if="!modify"
                    class="item_cursor"
                    @click="change()"
                >修改</p>
            </div>
            <div class="item">
                <p class="item_title">手机号:</p>
                <p class="item_phone">{{ formData.phone }}</p>
            </div>
            <div class="titles">自动接入设置</div>
            <div
                class="item"
                :style="{marginBottom: '0px'}"
            >
                <p class="item_titles">自动接入人数上限:</p>
                <el-input
                    v-model="formData.max_service_num"
                    size="medium"
                    :style="{width: '60px', marginRight: '12px'}"
                />
                <p class="item_titles">人</p>
            </div>
        </div>
        <div class="foot">
            <el-button
                size="medium"
                type="default"
                :style="{width: '120px', marginRight: '32px'}"
                @click="cancel()"
            >
                取消
            </el-button>
            <el-button
                size="medium"
                type="primary"
                :style="{width: '120px'}"
                @click="confirm()"
            >
                保存
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CustomInfo',
    props: {
        no: {
            type: String,
            default: () => {}
        }
    },
    data () {
        return {
            name: '',
            kf_no: '',
            modify: false,
            formData: {
                username: '',
                nickname: '',
                phone: '',
                max_service_num: ''
            }
        };
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '客服系统'},{title: '客服管理'},{title: '客服设置'},{title: '资料设置'}]);
        this.kf_no = JSON.parse(this.$route.query.no).kf_no;
        this.getCustomZsdx();
    },
    methods: {
        /**
         * @description 获取掌大客服信息
         */
        getCustomZsdx () {
            this.$post('/student/customer_service_zsdx%5Cget',{
                kf_no: this.kf_no
            },resp=>{
                if (resp.code == 1) {
                    this.formData = {
                        ...resp.data
                    };
                    this.name = resp.data.nickname;
                    this.formData.nickname = resp.data.nickname.split('-')[1];
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 修改
         */
        change () {
            this.modify = !this.modify;
        },

        /**
         * @description 取消设置
         */
        cancel () {
            this.$confirm('取消后你修改的内容将不会进行保存,是否取消?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$notify({
                    title: '提示',
                    message: '取消成功',
                    type: 'success',
                    duration: 500
                });

                setTimeout(()=>{
                    this.$router.push({
                        name: 'customManagement',
                        query: {
                            TYPE: '1'
                        }
                    });
                },500);
            });
        },

        /**
         * @description
         */
        confirm () {
            this.$post('/student/customer_service_zsdx%5Cset',{
                kf_no: this.kf_no,
                nickname: this.formData.nickname,
                max_service_num: this.formData.max_service_num
            },resp=>{
                if (resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '保存成功',
                        type: 'success',
                        duration: 500
                    });

                    setTimeout(()=>{
                        this.$router.push({
                            name: 'customManagement',
                            query: {
                                TYPE: '1'
                            }
                        });
                    },500);
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.customInfo-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.customInfo {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 32px 32px 32px;
    border: 1px solid #DCDFE6;
    background: #FBFBFB;
    margin-top: 9px;
    .title {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        box-sizing: border-box;
        border-bottom: 1px #E9E9E9 solid;
        margin-bottom: 24px;
    }
    .item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .item_list {
            display: flex;
            align-items: center;
            min-width: 158px;
            width: 158px;
            height: 36px;
            border-radius: 4px;
            box-sizing: border-box;
            border: 1px #DCDFE6 solid;
            padding-left: 12px;
            .item_list_name {
                color: #999999;
                font-size: 14px;
                white-space: nowrap;
            }
            .item_name_input {
                border: none;
                color: #333333;
                font-size: 14px;
            }
        }
        .item_title {
           color: #333333;
           font-size: 14px;
           width: 56px;
           height: 14px;
           line-height: 14px;
           margin-right: 12px;
        }
        .item_logo {
            width: 51px;
            height: 51px;
            border-radius: 50%;
        }
        .item_phone {
            color: #333333;
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            white-space: nowrap;
        }
        .item_cursor {
            color: #20A0FF;
            cursor: pointer;
            font-weight: bold;
            margin-left: 14px;
        }
        .item_titles {
            color: #333333;
           font-size: 14px;
           height: 14px;
           line-height: 14px;
           margin-right: 12px;
        }
    }
    .titles {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        box-sizing: border-box;
        border-bottom: 1px #E9E9E9 solid;
        margin-bottom: 24px;
        margin-top: 18px;
    }
}
.foot {
    width: 100%;
    height: 36px;
    display: flex;
    margin-top: 32px;
    padding-left: 32px;
    box-sizing: border-box;
}
</style>

<style lang="less">
.customInfo-wrap {
    .item_name_input .el-input__inner {
        border: none;
        color: #333333;
        font-size: 14px;
        padding: 0px 5px 0 0;
    }
}
</style>